import React, { useState } from 'react'
import style from './yqtab.module.css'
import YQDataOne from './YQDataOne'
import YQDataTwo from './YQDataTwo'
function YQTabData() {
    const [activeTab, setActiveTab] = useState('tab1')
    const tabs = [
        { id: 'tab1', label: '作品数据', content: <YQDataOne /> },
        { id: 'tab2', label: '分发数据', content: <YQDataTwo /> }
    ]
    return (
        <div>
            <div className={style.tab}>
                <h2>我的数据</h2>
                <div className={style.tabs}>
                    {tabs.map(tab => (
                        <button
                            key={tab.id}
                            // 在内容区域，使用条件渲染来显示当前激活的标签页内容。这需要理解如何根据状态来决定显示哪个组件。
                            className={activeTab === tab.id ? style.active : ''}
                            //   若要实现划过（鼠标悬停）某个标签（tab）时切换内容的效果，而不是点击切换，我们需要使用 onMouseEnter 事件代替 onClick 事件。
                            onMouseEnter={() => setActiveTab(tab.id)}
                        >
                            {tab.label}
                        </button>
                    ))}
                </div>
                <span>查看更多&gt;</span>
            </div>

            <div className={style.content}>
                {/* 使用tabs.find方法来查找当前激活的标签页内容，需要确保这个方法在各种情况下都能正确地找到对应的内容 */}
                {tabs.find(tab => tab.id === activeTab)?.content}
            </div>

        </div>
    )
}

export default YQTabData
